<template>
	<div class="tabControl">
		<div class="tabControl-item" 
		     v-for="(title,index) in titles"
			 :class="{active: index === currentIndex}"
			 @click="itemClick(index)"
		 >
			<span>{{title}}</span>
		</div>
	</div>
</template>

<script>
	export default{
		name:'tabControl',
		props:{
			titles:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		methods:{
			itemClick(index){
				this.currentIndex = index
				this.$emit('tabClick',index)
			}
		}
	}
</script>

<style scoped lang="less">
	.tabControl{
		background-color: #fff;
		display: flex;
		height: 40px;
		line-height: 40px;
		.tabControl-item{
			flex: 1;
			font-size: 14px;
			text-align: center;
			span {
				padding: 5px;
			}
		}
		
	}
	.active span {
		border-bottom: 3px solid #FF5777;
	}
	.active {
		color: var(--color-high-text);
	}
</style>
